<template>
  <div style="height: 100%;">
    <transition name="el-fade-in-linear">
      <span v-if="!showFlag"
            class="el-icon-caret-left open-arrow"
            @click="trigger"></span>
    </transition>
    <transition name="el-zoom-in-center">
      <div v-if="showFlag"
           class="step-frame">
        <span class="el-icon-caret-right close-arrow"
              @click="trigger"></span>
        <el-steps direction="vertical"
                  align-center
                  :active="active"
                  finish-status="success">
          <el-step title="开始"></el-step>
          <el-step :key="key"
                   v-for="(item, key) in operations"
                   :title="item.title"
                   :description="item.description"></el-step>
        </el-steps>
      </div>
    </transition>
  </div>
</template>

<style lang="scss">
.open-arrow {
  font-size: 54px;
  color: #58a3f3;
  position: fixed;
  right: 1px;
  top: 100px;
  z-index: 1000;
}
.close-arrow {
  font-size: 54px;
  color: #fff;
  position: absolute;
  right: -2px;
  top: 2px;
  z-index: 1000;
}
.step-frame {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  padding: 30px 30px;
  position: fixed;
  float: right;
  right: -1px;
  width: 20%;
  height: 90%;
  z-index: 999;
  background-color: #686e90e0;
  & > div div .el-step__title {
    color: #a0ef67;
  }
}
</style>

<script>
import 'element-ui/lib/theme-chalk/base.css'
export default {
  data() {
    return {
      showFlag: true
    }
  },
  props: {
    operations: {
      type: Array,
      default: () => { return [] }
    },
    active: {
      type: Number,
      default: 0
    }
  },
  methods: {
    trigger() {
      this.showFlag = !this.showFlag
    }
  }
}
</script>
